<template>
  <el-form ref="studentForm" :model="studentForm" label-width="100px" style="margin-top: 20px">
    <el-form-item class="form-item" label="姓名:" :required="true">
      <el-input
        v-model="studentForm.name"
        :class="Style.nameStyle"
        type="text"
        style="width: 200px;"
        @blur="validateStuName"
      />
      <span>{{ Tip.nametip }}</span>
    </el-form-item>
    <el-form-item class="form-item" label="年级:" :required="true">
      <el-input
        v-model="studentForm.grade"
        :class="Style.gradeStyle"
        type="text"
        style="width: 200px;"
        @blur="validateStuGrade"
      />
      <span>{{ Tip.gradetip }}</span>
    </el-form-item>
    <el-form-item class="form-item" label="密码:" :required="true">
      <el-input
        v-model="studentForm.password"
        :class="Style.pwdStyle"
        type="text"
        style="width: 200px;"
        @blur="validateStuPwd"
      />
      <el-button
        class="el-button--primary is-plain"
        style="margin-left: 5px"
        @click="randomPwd"
      >
        生成随机密码
      </el-button>
      <span>{{ Tip.pwdtip }}</span>
    </el-form-item>
    <el-button
      type="primary"
      :loading="isloading"
      style="margin-left: 100px;width: 200px"
      @click="
        createStudent()"
    >创建学生
    </el-button>
  </el-form>
</template>

<script>
import { create } from '../../api/student'
export default {
  name: 'Create',
  data() {
    return {
      isloading: false,
      studentForm: {
        name: '',
        password: '',
        grade: ''
      },
      Tip: {
        nametip: '',
        gradetip: '',
        pwdtip: ''
      },
      Style: {
        nameStyle: '',
        gradeStyle: '',
        pwdStyle: ''
      }
    }
  },
  methods: {
    validateStuName: function() {
      const reg = /^[\u4e00-\u9fa5]{2,6}$/
      if (!reg.test(this.studentForm.name)) {
        this.Tip.nametip = '学生姓名需由2到6位中文组合'
        this.Style.nameStyle = 'danger'
        return false
      } else {
        this.Tip.nametip = ''
        this.Style.nameStyle = 'success'
        return true
      }
    },
    validateStuGrade: function() {
      const reg = /^[\u4e00-\u9fa5]{2,6}$/
      if (!reg.test(this.studentForm.grade)) {
        this.Tip.gradetip = '学生年级格式错误'
        this.Style.gradeStyle = 'danger'
        return false
      } else {
        this.Tip.gradetip = ''
        this.Style.gradeStyle = 'success'
        return true
      }
    },
    validateStuPwd: function() {
      const reg = /^[A-Za-z0-9]{6,16}$/
      if (!reg.test(this.studentForm.password)) {
        this.Tip.pwdtip = '密码需由6-16位数字或英文组合'
        this.Style.pwdStyle = 'danger'
        return false
      } else {
        this.Tip.pwdtip = ''
        this.Style.pwdStyle = 'success'
        return true
      }
    },
    randomPwd: function() {
      this.studentForm.password = Math.random().toString().slice(-6)
      this.validateStuPwd()
    },
    createStudent: function() {
      if (this.validateStuPwd() && this.validateStuGrade() && this.validateStuPwd()) {
        this.isloading = true
        create(this.studentForm).then(() => {
          this.studentForm = this.$options.data().studentForm
          this.Style = this.$options.data().Style
          this.isloading = false
          this.$message({
            type: 'success',
            message: '学员创建成功!'
          })
        }).catch(() => {
          this.isloading = false
          this.$message({
            type: 'error',
            message: '学员创建失败!'
          })
        })
      }
    }
  }
}
</script>

<style scoped>
span{
    color: rgb(251,114,153);
    margin-left: 10px
}
.form-item{
    display: block;
    margin-bottom: 30px;
}
.success /deep/ input{
    border-color: #67c23a;
}
.danger /deep/ input{
    border-color: #f56c6c;
}
</style>
